import React, { lazy } from "react"

import { Navigate } from "react-router-dom"
import Home from "../views/Home"
import Login from "../views/Login/index"

const Page1 = lazy(() => import("../views/Page1"))
const Page2 = lazy(() => import("../views/Page2"))
const Page301 = lazy(() => import("../views/Page3.1"))


const withLoadingComponent = (comp:JSX.Element) => (
    <React.Suspense fallback={<div>Loading...</div>}>
        {comp} 
    </React.Suspense>
)

const routes = [
    {
        path: "/",
        element: <Navigate to="/page1"></Navigate>
    },
    {
        path: "/",
        element:<Home></Home>,
        children:[
            {
                path:"/page1",
                element:withLoadingComponent(<Page1></Page1>)
            },
            {
                path:"/page2",
                element:withLoadingComponent(<Page2></Page2>)
            },
            {
                path:"/page3/page3.1",
                element:withLoadingComponent(<Page301></Page301>)
            }
        ]
    },
    {
        path:"/login",
        element:<Login></Login>
    },
    // 访问其他路径的时候直接跳到首页
    {
        path:"*",
        element: <Navigate to="/page1"></Navigate>
    }
]

export default routes